<template>
	<div class="zpcenter">
		<el-row style="margin-top: 20px;margin-bottom: 20px;">
			<el-col :span="12">
				<head-top title='招聘中心'></head-top>
			</el-col>
		</el-row>
		<el-row style="margin-top: 20px;">
			<el-col>
				<div class="row">
					<div class="title">地点</div>
					<div class="right">
						<div class="r_left">
							<el-select v-model="sheng" @change="choseProvince" placeholder="省级地区">
								<el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id">
								</el-option>
							</el-select>
							<el-select v-model="shi" @change="choseCity" placeholder="市级地区">
								<el-option v-for="item in shi1" :key="item.value" :label="item.value" :value="item.id">
								</el-option>
							</el-select>
							<!-- <el-select v-model="qu" @change="choseBlock" placeholder="区级地区">
								<el-option v-for="item in qu1" :key="item.id" :label="item.value" :value="item.id">
								</el-option>
							</el-select> -->

						</div>
						<div class="r_right"><img src="../../../static/image/position.png" alt="" class="src">重新定位 </div>
					</div>
				</div>
				<div class="row" v-if="hyList.length!=0">
					<div class="title">行业</div>
					<div class="right" style="flex-direction: column;">
						<div class="hangye">
							<div class="item" v-for="(item,index) in hyList" :key='index' @click="xzhy(item)" :class="filter.jobHy==item?'active':''">
								{{item}} </div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="title">月薪</div>
					<div class="right">
						<div class="hangye">
							<div class="item " @click="taphyactive(0)" :class="hyactive==0?'active':''"> 不限</div>
							<div class="item " v-for="(item,index) in JobMoneyList" :key='index' @click="xzjobMoney(item)" :class="filter.jobMoney==item?'active':''">{{item}}</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="title">其他</div>
					<div class="right">
						<div class="r_left">
							<el-cascader placeholder="职位类别" :options="JobType" filterable :props="jobprops"></el-cascader>
							<el-select v-model="filter.jobYear" placeholder="工作经验" class="qtselect">
								<el-option v-for="item in YearList" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
							<el-select v-model="filter.edu" placeholder="学历要求" class="qtselect">
								<el-option v-for="item in EduList" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>

						</div>
						<div class="r_right">清空筛选条件 </div>
					</div>
				</div>
				<div class="row jobtotal flexwrap">
					<div class="item">销售总监 <span>5份</span></div>
					<div class="item">销售总监 <span>5份</span></div>
					<div class="item">销售总监 <span>5份</span></div>
				</div>

				<div class="row flex-between jobs">
					<jobcomon v-for="(item,index) in joblist" :type='1' :item="item" :key='index'></jobcomon>
				</div>
				<div class="row" style="justify-content: flex-end;">
					<div class="pagination">
						<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import axios from 'axios'
	import headTop from '@/components/headTop'
	import jobcomon from '@/components/jobcomon.vue'
	import {
		GetHy,
		GetJobMoneyList,
		GetJobYearList,
		GetJobTypeList,
		GetEduList,
		SearchResumeList,
		GetJobList
	} from '@/api/getData'
	export default {
		data() {
			return {
				joblist: [{}, {}, {}],
				hyactive: 0, //行业点亮
				mapJson: '../static/json/map.json',
				province: '',
				sheng: '',
				shi: '',
				shi1: [],
				qu: '',
				qu1: [],
				city: '',
				block: '',
				cur_page: 1,
				total: 100,
				jobprops: {
					value: 'id',
					label: 'name',
					children: 'childs'
				},
				hyList: [], //行业
				JobMoneyList: [], //薪资
				YearList: [], //经验
				JobType: [], //职业类型
				EduList: [], //学历
				filter: {
					job: "",
					jobHy: "",
					jobMoney: "",
					fCity: "",
					edu: "",
					jobYear: ""
				},
				jobCountList:[]

			}
		},
		components: {
			headTop,
			jobcomon
		},
		mounted() {
			
		},
		watch: {
			
			
			
			filter: { //监听的对象
				deep: true, //深度监听设置为 true
				handler: function(newV, oldV) {
					
				}
			}
		},
		created() {
            this.SearchResumeList();
			this.getCityData();
			this.GetHy();
			this.GetJobMoneyList();
			this.JobYearList();
			this.JobTypeList();
			this.GetEduList();
            this.GetJobList();
		},
		methods: {
			
			// 分页导航
			handleCurrentChange(val) {
			    this.cur_page = val;
			    this.getList();
			},
			
			//搜索简历
			async SearchResumeList(){
				let that=this;
				const res = await SearchResumeList({
					currentPage:this.cur_page,
					pageSize:10,
					filter:that.filter
				
				});
				if (res.code == 1) {
					
					that.joblist = res.data;
				
				}
			},
			//选中行业
			xzhy(item) {
				this.filter.jobHy = item;
			},
			xzjobMoney(item) {
				this.filter.jobMoney = item;
			},
			//获取职位和数量
			async GetJobList(){
				let that = this;
				const res = await GetJobList();
				if (res.code == 1) {
					that.jobCountList = res.data;
				      
				}else if(res.code == 401){
					that.reLogin();
				}
			},
			
			//获取年限
			async JobYearList() {
				let that = this;
				const res = await GetJobYearList();
				if (res.code == 1) {
					that.YearList = res.data;

				}
			},
			//获取职业类别
			async JobTypeList() {
				let that = this;
				const res = await GetJobTypeList();
				if (res.code == 1) {
					
					that.JobType = res.data;

				}
			},
			//获取学历
			async GetEduList() {
				let that = this;
				const res = await GetEduList();
				if (res.code == 1) {
					that.EduList = res.data;
					
				}
			},
			//获取行业列表
			async GetHy() {
				let that = this;
				const res = await GetHy();
				if (res.code == 1) {
					that.hyList = res.data;
					
				}
			},
			//获取薪资列表
			async GetJobMoneyList() {
				let that = this;
				const res = await GetJobMoneyList();
				if (res.code == 1) {
					that.JobMoneyList = res.data;
					
				}
			},

			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;
				this.getList();
			},
			//点击行业
			taphyactive(ac) {
				this.hyactive = ac;
				console.log(this.hyactive);
			},

			// 加载china地点数据，三级
			getCityData: function() {
				var that = this
				axios.get(this.mapJson).then(function(response) {
					if (response.status == 200) {
						var data = response.data
						that.province = []
						that.city = []
						that.block = []
						// 省市区数据分类
						for (var item in data) {
							if (item.match(/0000$/)) { //省
								that.province.push({
									id: item,
									value: data[item],
									children: []
								})
							} else if (item.match(/00$/)) { //市
								that.city.push({
									id: item,
									value: data[item],
									children: []
								})
							} else { //区
								that.block.push({
									id: item,
									value: data[item]
								})
							}
						}
						// 分类市级
						for (var index in that.province) {
							for (var index1 in that.city) {
								if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
									that.province[index].children.push(that.city[index1])
								}
							}
						}
						// 分类区级
						for (var item1 in that.city) {
							for (var item2 in that.block) {
								if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
									that.city[item1].children.push(that.block[item2])
								}
							}
						}
					} else {
						console.log(response.status)
					}
				}).catch(function(error) {
					console.log(typeof + error)
				})
			},
			// 选省
			choseProvince: function(e) {
				for (var index2 in this.province) {
					if (e === this.province[index2].id) {
						this.shi1 = this.province[index2].children
						this.shi = this.province[index2].children[0].value;
						this.filter.fCity=this.shi;
						this.qu1 = this.province[index2].children[0].children
						this.qu = this.province[index2].children[0].children[0].value
						this.E = this.qu1[0].id
					}
				}
			},
			// 选市
			choseCity: function(e) {
				console.log(e)
				for (var index3 in this.city) {
					if (e === this.city[index3].id) {
						this.filter.fCity=this.city[index3].value;
						console.log(this.city[index3].value)
						// this.qu1 = this.city[index3].children
						// this.qu = this.city[index3].children[0].value
						// this.E = this.qu1[0].id
						//  console.log(this.E)
					}
				}
			},
			// 选区
			choseBlock: function(e) {
				this.E = e;
				// console.log(this.E)
			},
			//未登录
			reLogin(){
				let that=this;
				that.$message({
					type: 'success',
					message: '未登录,请重新登录'
				});
				setTimeout(()=>{
					that.$router.push({
						path:'/'
					})
				},1500)
			}
		}
	}
</script>
<style lang="less" scoped="scoped">
	@import '../../style/mixin';
	.zpcenter {

		box-sizing: border-box;

		.jobs {
			border-bottom: 0px !important;
			padding-bottom: 0px !important;
		}

		.jobtotal {
			background-color: #FFFFFF;
			padding: 16px 0px 16px 19px !important;
			box-sizing: border-box;
			margin: 14px 0px 19px;

			.item {
				margin-right: 40px;

				span {
					margin-left: 10px;
					color: #226FFF;
				}
			}
		}

		.border-btm {
			border-bottom: 4px solid #eeeeee;
		}

		.qtselect {
			margin-right: 40px;
		}

		.margin0 {
			margin-bottom: 0px !important;
		}

		.active {
			color: #226FFF !important;
		}

		.row {
			display: flex;
			align-items: center;
			width: 100%;
			border-bottom: 1px solid #EEEEEE;
			padding: 17px 0px;
			box-sizing: border-box;
			align-items: baseline;

			.hangye {
				width: 100%;
				display: flex;
				align-items: center;
				align-items: flex-start;
				flex-wrap: wrap;

				.item {
					margin-right: 36px;
					display: flex;
					align-items: center;
					font-size: 16px;
					margin-bottom: 25px;
					color: #666666;
					cursor: pointer;

					img {
						width: 12px;
						height: 12px;
						margin-left: 6px;
					}
				}
			}



			.title {
				color: #333333;
				font-size: 20px;
				margin-right: 45px;
				font-weight: 600;
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// flex-direction: column;

				.r_right {
					display: flex;
					align-items: center;
					color: #226FFF;
					font-size: 16px;

					img {
						width: 22px;
						height: 22px;
						vertical-align: middle;
						margin-right: 10px;
					}
				}
			}

		}
	}
</style>
